<template>
    <div>
        <el-button type="primary" @click="goTO()">添加轮播图</el-button>

        <!-- 表格 -->
        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
            <el-table-column align="center" label="序号" type="index" width="80" />
            <el-table-column align="center" label="图片" prop="imgSrc">
                <template #default="scope">
                    <el-image style="width: 100px; height: 100px;" :src="scope.row.imgSrc" :preview-src-list="[scope.row.imgSrc]"
                        fit="cover" preview-teleported />
                </template>
            </el-table-column>
            <el-table-column align="center" label="名称" prop="imgName" width="180" />
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-popconfirm title="确定删除吗?" confirm-button-text="确定" cancel-button-text="再想想"
                        @confirm="confirmEvent(scope.$index, scope.row)" @cancel="cancelEvent">
                        <template #reference>
                            <el-button type="danger" :icon="Delete" circle>
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination style="float: right; margin-top: 10px;" v-model:current-page="currentPage"
            v-model:page-size="pageSize" :page-sizes="[100, 200, 300, 400]" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
    Delete
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { bannerDataList, delBannerList } from "../../api/api";

// 表格的接口数据约束
interface User {
    _id: string
    imgName: string
    imgSrc: string
}

const currentPage = ref(1)
const pageSize = ref(10)
const background = ref(true)
const router = useRouter()

// 每页显示个数
const handleSizeChange = (val: number) => {
    pageSize.value = val
}
// 页码
const handleCurrentChange = (val: number) => {
    currentPage.value = val
}

// 跳转到添加轮播图页面
const goTO = () => {
    router.push('/addbanner')
}

// 确认删除当前信息
const confirmEvent = async (index: number, row: User) => {
    // console.log(index, row)
    let data = {
        id: row._id
    }
    await delBannerList(data)
    getList()
}

// 取消
const cancelEvent = () => {
    return
}

const tableData = ref([])

const getList = async() => {
    let res = await bannerDataList()
    console.log(res.data.data);
    tableData.value = res.data.data
}

onMounted(() => {
    getList()
})
</script>

<style lang="scss" scoped>
.el-button {
    // float: left;
    margin-bottom: 10px;
}
</style>